<template>
  <div class="content">
    <div class="title">
      <van-icon @click="goback" size="22px" color="#fff" name="arrow-left" />
      <span class="text">Launchpad</span>
    </div>
    <div class="bac">
      <img src="@/assets/launchpad/men.png" alt="">
    </div>
    <div class="text1">
      {{
        $t('BetheDEX是一家去中心化的現貨和合約交易所，旨在為用戶提供去中心化安全匿名和零價格影響的現貨和永續合約交易服務。我們通過獨特的聚合交易協議支持交易，同時通過做市、Swap費用和槓桿交易來賺取流動性提供者費用，並藉助領先交易量交易所的價格匯總支持。')
      }}
    </div>
    <div class="text2">
      {{ $t('BTB代幣是為BetheDEX整個基礎設施提供動力的代幣，是BetheDEX的第一個功能，BTB代幣作為有效的流動性支持機制，幫助項目獲得最佳的交易體驗，並為項目整個代幣生態系統的參與者產生足夠的利潤。') }}
    </div>
    <div class="current">
      <div class="tex1">{{ $t('本期總金額') }}</div>
      <div class="tex2">26400</div>
      <div class="div">
        <div class="item">{{ $t('價格') }}：0.22 USDT</div>
        <div class="item">{{ $t('當前第') }} 2 {{ $t('期') }}</div>
        <div class="item">{{ $t('本期開始時間') }}: 2023-09-12 14:00:00</div>
        <div class="item">{{ $t('本期結束時間') }}: 2023-09-12 14:00:00</div>
        <div class="text3">
          {{ $t('開始後使用者不限量參與，不限額。結束後將代幣發放到使用者帳戶，退款需使用者手動調用合約退款') }}
        </div>
      </div>
    </div>
    <div class="current1">
      <div class="tex1">{{ $t('第') }}2{{ $t('期已購') }}/USDT</div>
      <div class="tex2">604255.96436332</div>
      <div class="progress">
        <div :style="{ width: percent + '%' }" class="item"></div>
      </div>
      <div class="num">{{ percent + '%' }}</div>
      <div class="div">
        <div class="text3">
          {{ $t('本期已結束') }}
        </div>
      </div>
    </div>
    <div class="price">
      <div class="tex1">{{ $t('本期價格') }}/USDT</div>
      <div class="num">0.22</div>
      <div class="input">
        <input :placeholder="$t('輸入認購的USDT數量')" class="ipt" type="text">
        <div class="all">{{ $t('全部') }}</div>
      </div>
      <div class="yue">
        <div class="left">{{ $t('錢包餘額') }}</div>
        <div class="right">0USDT</div>
      </div>
      <div class="btn">
        <div class="left">{{ $t('授權') }} USDT</div>
        <div class="right">{{ $t('記錄') }}</div>
      </div>
    </div>
    <div style="width: 100%;height: 30px;background-color: #17171a;"></div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const percent = ref(10)

function goback() {
  router.go(-1)
}


</script>

<style lang="scss" scoped>
.content {
  padding: 10px 15px 0 15px;
  background-color: #17171a;
}

.title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;

  .text {
    font-size: 16px;
    color: #fff;
    // margin-left: auto;
  }

  .van-icon {
    position: absolute;
    left: 0;
    // margin-left: auto;
  }
}

.bac {
  width: 100%;
  height: 245px;
  padding: 0 43.5px;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100%;
  }
}

.text1 {
  color: #A8aeae;
  font-size: 14px;
  margin-top: 16px;
}

.text2 {
  margin-top: 8px;
  color: #A8aeae;
  font-size: 14px;
}

.current {
  width: 100%;
  height: 246px;
  padding: 15px;
  color: #fff;
  margin-top: 24px;
  box-sizing: border-box;
  background: url("@/assets/launchpad/bac.png") no-repeat;
  background-size: 100% 100%;

  .tex1 {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .tex2 {
    width: 100%;
    text-align: center;
    font-size: 36px;
  }

  .div {
    width: 100%;
    height: 156px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    box-sizing: border-box;

    .item {
      font-size: 13px;

    }

    .item::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: rgb(242, 206, 61);
      margin-right: 5px;
    }

    .text3 {
      font-size: 12px;
      color: rgb(168, 174, 174);
      margin-top: 13px;
    }
  }
}

.current1 {
  width: 100%;
  height: 184px;
  padding: 15px;
  color: #fff;
  margin-top: 24px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background: url("@/assets/launchpad/bac.png") no-repeat;
  background-size: 100% 100%;

  .tex1 {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .tex2 {
    width: 100%;
    text-align: center;
    font-size: 36px;
  }

  .progress {
    width: 100%;
    height: 15px;
    margin-top: 14px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 3px solid #524722;
    overflow: hidden;

    .item {
      width: 100%;
      height: 100%;
      background-color: #f2ce3d;
      border-radius: 3px;
    }

  }

  .num {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    font-size: 13px;
    color: #fff;
    margin-bottom: 14px;
  }

  .div {
    width: 100%;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.1);
    // padding: 15px;
    box-sizing: border-box;

    .text3 {
      font-size: 14px;
      color: #f2f3f3;
      text-align: center;
      line-height: 44px;
    }
  }
}

.price {
  width: 100%;
  height: 240px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #2e323b;

  .tex1 {
    width: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
  }

  .num {
    width: 100%;
    font-size: 36px;
    text-align: center;
    color: #f2ce3d;
  }

  .input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    margin: 10px 0;
    background-color: #232830;
    padding: 0 10px;

    .ipt {
      outline: none;
      border: 0px;
      background: none;
      color: inherit;
      font-size: 13px;
      caret-color: #fff;
      color: #fff;
    }

    .ipt::placeholder {
      font-size: 16px;
    }

    .all {
      color: rgb(242, 206, 61);
      font-size: 15px;
    }
  }

  .yue {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 20px;

    .left {
      color: #A8aeae;
    }

    .right {
      color: #fff;
    }
  }

  .btn {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 43px;
    color: #fff;

    .left {
      width: 150px;
      height: 43px;
      background-color: #f2ce3d;
      text-align: center;
      line-height: 43px;
      font-size: 16px;
      border-radius: 10px;
      border: 1px solid #273134;
      box-sizing: border-box;
    }

    .right {
      width: 150px;
      height: 43px;
      // background-color: #f2ce3d;
      text-align: center;
      line-height: 43px;
      font-size: 16px;
      border-radius: 10px;
      border: 1px solid #273134;
      box-sizing: border-box;
    }
  }
}
</style>
